import type { FC } from 'react';
import { View } from '@tarojs/components';
import Steps, { StepItem } from './index';

const HeightTest: FC = () => {
  // 测试不同高度的内容
  const heightTestSteps: StepItem[] = [
    {
      leftTitle: '短标题',
      leftDescription: '短描述',
      rightTitle: '短标题',
      rightDescription: '短描述',
    },
    {
      leftTitle: '这是一个很长的标题，用来测试连接线的高度自适应功能',
      leftDescription:
        '这是一个很长的描述文本，用来测试连接线的高度自适应功能。这个描述包含多行内容，应该能够正确调整连接线的高度。',
      rightTitle: '右侧长标题',
      rightDescription: '右侧长描述文本',
    },
    {
      leftTitle: '中等标题',
      leftDescription: '中等长度的描述文本',
      rightTitle: '右侧中等标题',
      rightDescription: '右侧中等长度的描述文本，包含一些额外的内容。',
    },
    {
      leftTitle: '短标题',
      leftDescription: '短描述',
      rightTitle: '短标题',
      rightDescription: '短描述',
    },
  ];

  const heightTestStep2: StepItem[] = [
    {
      rightTitle: '短标题',
      rightDescription: '短描述',
    },
    {
      rightTitle: '这是一个很长的标题，用来测试连接线的高度自适应功能',
      rightDescription:
        '这是一个很长的描述文本，用来测试连接线的高度自适应功能。这个描述包含多行内容，应该能够正确调整连接线的高度。',
    },
    {
      rightTitle: '右侧中等标题',
      rightDescription: '右侧中等长度的描述文本，包含一些额外的内容。',
    },
    {
      rightTitle: '短标题',
      rightDescription: '短描述',
    },
  ];

  return (
    <View style={{ padding: '20px' }}>
      <View
        style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '20px' }}
      >
        连接线高度自适应测试
      </View>

      <Steps steps={heightTestSteps} />
      <Steps steps={heightTestStep2} onlyRight activeIndex={1} />
    </View>
  );
};

export default HeightTest;
